<!--
 * @Author: hu_binbin
 * @Date: 2021-08-25 16:17:08
 * @LastEditTime: 2021-08-25 16:42:56
 * @Description: 操作按钮
-->

<template>
    <div class="bg">
        <div class="title">请选择你要的操作</div> 
        <div class="btn">
            <van-button color="#17B49B" v-for="(item,index) in btnNameList" :key="index" plain :class="{'itemBtn':true,'active':item.checked}" @click="topageBtn(item,index)" type="primary" size="small">{{item.name}}</van-button>
        </div>
    </div>
</template>

<script>
import Util from "@/utils/util"
export default {
    name:"operBtn",
    props: {
    },
    data() {
        return {
            btnNameList:[
                {
                    name:"设备关联任务",
                    checked:true,
                    id: "11",
                },
                {
                    name:"缺陷登记",
                    checked:false,
                    id: "22",
                },
                {
                    name:"隐患登记",
                    checked:false,
                    id: "33",
                },
                {
                    name:"设备台账",
                    checked:false,
                    id: "44",
                },
            ]
        }
    },
    methods: {
        topageBtn(btn,index) {
            this.btnNameList.forEach((item,i) => {
                if(index == i){
                    item.checked = !item.checked;
                }else{
                   item.checked = false; 
                }
            });
            
            var name;
            switch (btn.id) {
                case "11"://设备关联任务
                    name = "deviceContact"
                    break;
                case "22"://缺陷登记
                    name = "newAddDefect"
                    break;
                case "33"://隐患登记
                    name = "newAddDanger"
                    break;
                case "44"://设备台账
                    name = "deviceStand"
                    break;
                default:
                    name: ""
                    break;
            }
            if(name) {
                this.$router.push({
                    name: name
                })
            }
        }
    },
};
</script>

<style scoped>
    .bg{
        font-size: 15px; 
        width: 100%;
        height: 100%;
        color: #333;
        overflow: hidden;
        background: #fff;
    }
    .title{
        text-align: center;
        margin: 1rem 0.5rem;
        font-weight: bold;
        font-size: 15px;
        color: #333;
    }
    .btn{
       margin: 1.5rem;   
       text-align: center;
    }
    .itemBtn{
        margin-bottom: 1rem;
        width: 100%;
        height:3rem;
    }
    .active{
        background:#17B49B;
    }
    .active /deep/ .van-button__text{
        color:#fff;
    }
</style>